<template>
  <view>

    <view class="line"></view>

    <view class="container">
      <u--form labelPosition="left" :model="ruleForm" ref="ruleForm" labelWidth="200">
        <view class="title">基础数据</view>
        <u-form-item label="竣工图纸" prop="jgtz" borderBottom>
          <radio-group v-model="ruleForm.jgtz" style="text-align: right" class="radio-group" @change="(val) => ruleForm.jgtz = val.detail.value">
            <label v-for="(item, index) in radiolist" :key="item.value" class="radio-item" :class="{'active': item.value === ruleForm.jgtz}">
              <radio :value="item.value" :checked="item.value === ruleForm.jgtz" /><span class='label'>{{item.label}}</span>
            </label>
          </radio-group>
        </u-form-item>
        <u-form-item label="图纸与现场是否匹配" prop="tzyxc" borderBottom>
          <radio-group v-model="ruleForm.tzyxc" style="text-align: right" class="radio-group" @change="(val) => ruleForm.tzyxc = val.detail.value">
            <label v-for="(item, index) in radiolist" :key="item.value" class="radio-item" :class="{'active': item.value === ruleForm.tzyxc}">
              <radio :value="item.value" :checked="item.value === ruleForm.tzyxc" /><span class='label'>{{item.label}}</span>
            </label>
          </radio-group>
        </u-form-item>
        <u-form-item label="周边市政管网是否配套" prop="zbsz" borderBottom>
          <radio-group v-model="ruleForm.zbsz" style="text-align: right" class="radio-group" @change="(val) => ruleForm.zbsz = val.detail.value">
            <label v-for="(item, index) in radiolist" :key="item.value" class="radio-item" :class="{'active': item.value === ruleForm.zbsz}">
              <radio :value="item.value" :checked="item.value === ruleForm.zbsz" /><span class='label'>{{item.label}}</span>
            </label>
          </radio-group>
        </u-form-item>
        <u-form-item label="是否正确接入市政管网" prop="sfzqjrscgw" borderBottom>
          <radio-group v-model="ruleForm.sfzqjrscgw" style="text-align: right" class="radio-group" @change="(val) => ruleForm.sfzqjrscgw = val.detail.value">
            <label v-for="(item, index) in radiolist" :key="item.value" class="radio-item" :class="{'active': item.value === ruleForm.sfzqjrscgw}">
              <radio :value="item.value" :checked="item.value === ruleForm.sfzqjrscgw" /><span class='label'>{{item.label}}</span>
            </label>
          </radio-group>
        </u-form-item>
        <u-form-item label="与市政管网接入点数" prop="linePoint" borderBottom>
          <u--input v-model="ruleForm.linePoint" border="none" placeholder="请填写"></u--input>
        </u-form-item>
        <u-form-item label="小区是否实行雨污分流" prop="sfywfl" borderBottom>
          <radio-group v-model="ruleForm.sfywfl" style="text-align: right" class="radio-group" @change="(val) => ruleForm.sfywfl = val.detail.value">
            <label v-for="(item, index) in radiolist" :key="item.value" class="radio-item" :class="{'active': item.value === ruleForm.sfywfl}">
              <radio :value="item.value" :checked="item.value === ruleForm.sfywfl" /><span class='label'>{{item.label}}</span>
            </label>
          </radio-group>
        </u-form-item>
<!--        <view class="title">"三水"是否规范接入污水管网</view>
        <u-form-item label="厨房废水" prop="cffs" borderBottom>
          <radio-group v-model="ruleForm.cffs" style="text-align: right" class="radio-group" @change="(val) => ruleForm.cffs = val.detail.value">
            <label v-for="(item, index) in radiolist" :key="item.value" class="radio-item" :class="{'active': item.value === ruleForm.cffs}">
              <radio :value="item.value" :checked="item.value === ruleForm.cffs" /><span class='label'>{{item.label}}</span>
            </label>
          </radio-group>
        </u-form-item>
        <u-form-item label="卫生间污水" prop="wsjws" borderBottom>
          <radio-group v-model="ruleForm.wsjws" style="text-align: right" class="radio-group" @change="(val) => ruleForm.wsjws = val.detail.value">
            <label v-for="(item, index) in radiolist" :key="item.value" class="radio-item" :class="{'active': item.value === ruleForm.wsjws}">
              <radio :value="item.value" :checked="item.value === ruleForm.wsjws" /><span class='label'>{{item.label}}</span>
            </label>
          </radio-group>
        </u-form-item>
        <u-form-item label="阳台洗衣污水" prop="ytxyws" borderBottom>
          <radio-group v-model="ruleForm.ytxyws" style="text-align: right" class="radio-group" @change="(val) => ruleForm.ytxyws = val.detail.value">
            <label v-for="(item, index) in radiolist" :key="item.value" class="radio-item" :class="{'active': item.value === ruleForm.ytxyws}">
              <radio :value="item.value" :checked="item.value === ruleForm.ytxyws" /><span class='label'>{{item.label}}</span>
            </label>
          </radio-group>
        </u-form-item>
        <u-form-item label="化粪池（沼气池）数量" prop="digesterCount" borderBottom>
          <u--input v-model="ruleForm.digesterCount" border="none" placeholder="请填写"></u--input>
        </u-form-item>-->
        <view class="title">化粪池（沼气池）数量（多选）</view>
        <u-form-item label="接入雨水管" prop="jrysg" borderBottom>
          <radio-group v-model="ruleForm.jrysg" style="text-align: right" class="radio-group" @change="(val) => ruleForm.jrysg = val.detail.value">
            <label v-for="(item, index) in radiolist" :key="item.value" class="radio-item" :class="{'active': item.value === ruleForm.jrysg}">
              <radio :value="item.value" :checked="item.value === ruleForm.jrysg" /><span class='label'>{{item.label}}</span>
            </label>
          </radio-group>
        </u-form-item>
        <u-form-item label="接入污水管网" prop="jrwsgw" borderBottom>
          <radio-group v-model="ruleForm.jrwsgw" style="text-align: right" class="radio-group" @change="(val) => ruleForm.jrwsgw = val.detail.value">
            <label v-for="(item, index) in radiolist" :key="item.value" class="radio-item" :class="{'active': item.value === ruleForm.jrwsgw}">
              <radio :value="item.value" :checked="item.value === ruleForm.jrwsgw" /><span class='label'>{{item.label}}</span>
            </label>
          </radio-group>
        </u-form-item>
        <u-form-item label="直排（渗透）外环境" prop="zpwhj" borderBottom>
          <radio-group v-model="ruleForm.zpwhj" style="text-align: right" class="radio-group" @change="(val) => ruleForm.zpwhj = val.detail.value">
            <label v-for="(item, index) in radiolist" :key="item.value" class="radio-item" :class="{'active': item.value === ruleForm.zpwhj}">
              <radio :value="item.value" :checked="item.value === ruleForm.zpwhj" /><span class='label'>{{item.label}}</span>
            </label>
          </radio-group>
        </u-form-item>
        <view class="title">其它情况</view>
        <u--textarea style="background-color: #F8F9FB;" v-model="ruleForm.otherSituation" border="none" placeholder="请输入其他问题内容"></u--textarea>
      </u--form>

    </view>

    <view style="position: fixed; display:flex; bottom: 0; width: 100%; height: 166rpx; box-shadow: 0 -4rpx 24rpx 0 #00000014; background: white; z-index: 99">
      <view style="padding: 16rpx 32rpx 0 32rpx; width: 100%; height: 100%;">
        <u-button type="primary" text="提交" @click="submit"></u-button>
      </view>
    </view>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
import { guanWangAdd, guanWangEdit, queryGuanWangById } from "@/api/guanwang";

export default {
  data() {
    return {
      ruleForm: {
        jgtz: null,
        tzyxc: null,
        zbsz: null,
        sfzqjrscgw: null,
        sfywfl: null,
        // cffs: null,
        // wsjws: null,
        // ytxyws: null,
        jrysg: null,
        jrwsgw: null,
        zpwhj: null,
        otherSituation: null,
        linePoint: null,
        digesterCount: null
      },
      radiolist: [{
        label: '是',
        value: '1',
        disabled: false
        },
        {
          label: '否',
          value: '0',
          disabled: false
        }
      ],
      id: null
    }
  },
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  onLoad(opt) {
    let id = null
    try {
      id = (JSON.parse(decodeURIComponent(opt.params)) || {}).id
    } catch (e) {}
    this.id = id

    this.getDetailData(this.id)
  },
  onReady() {
  },
  methods: {
    getDetailData(id) {
      if (id) {
        // 信息回填
        const params = {
          id: id
        }
        queryGuanWangById(params).then((res) => {
          const ruleForm = res.data.result
          ruleForm.jgtz = ruleForm.jgtz + ''
          ruleForm.tzyxc = ruleForm.tzyxc + ''
          ruleForm.zbsz = ruleForm.zbsz + ''
          ruleForm.sfzqjrscgw = ruleForm.sfzqjrscgw + ''
          ruleForm.sfywfl = ruleForm.sfywfl + ''
          // ruleForm.cffs = ruleForm.cffs + ''
          // ruleForm.wsjws = ruleForm.wsjws + ''
          // ruleForm.ytxyws = ruleForm.ytxyws + ''
          ruleForm.jrysg = ruleForm.jrysg + ''
          ruleForm.jrwsgw = ruleForm.jrwsgw + ''
          ruleForm.zpwhj = ruleForm.zpwhj + ''
          this.ruleForm = ruleForm
        }).catch((e) => {})
      }
    },
    submit() {
      const params = {
        ...this.ruleForm,
        id: this.id,
        jgtz: this.ruleForm.jgtz - 0,
        tzyxc: this.ruleForm.tzyxc - 0,
        zbsz: this.ruleForm.zbsz - 0,
        sfzqjrscgw: this.ruleForm.sfzqjrscgw - 0,
        sfywfl: this.ruleForm.sfywfl - 0,
        // cffs: this.ruleForm.cffs - 0,
        // wsjws: this.ruleForm.wsjws - 0,
        // ytxyws: this.ruleForm.ytxyws - 0,
        jrysg: this.ruleForm.jrysg - 0,
        jrwsgw: this.ruleForm.jrwsgw - 0,
        zpwhj: this.ruleForm.zpwhj - 0,
      }
      let api = null
      if (this.id) {
        api = guanWangEdit
      } else {
        api = guanWangAdd
      }
      if (!api) {
        return
      }
      api(params).then((res) => {
        if (res.data.code === 200) {
          uni.showToast({
            title:'已提交',
            icon:'success'
          })
          uni.navigateBack();
        }
      }).catch(e => {})
    },
    hideKeyboard() {
      uni.hideKeyboard()
    },
  },

}
</script>

<style lang="scss" scoped>
.container {
  padding: 19rpx 32rpx 166rpx 32rpx;
  background: white;
}
.title {
  font-weight: 500;
  font-size: 36rpx;
  color: #000000e6;
}
.title:not(:first-child) {
  margin-top: 56rpx;
}
.radio-group {
  radio {
    width: 42rpx;
    height: 42rpx;
  }
  .label {
    margin-left: 11rpx;
  }
  :not(:first-child).radio-item {
    margin-left: 59rpx;
  }
}
.radio-item.active {
  .label {
    color: #3576F2FF !important;
  }
}
</style>
